<template>
  <div class="top-status ui-mr10">
    <!-- 待分配、待见证、见证中、待审核、已完成 -->
    <template v-if="type == 'manage'"> <i class="UNASSIGNED" />待分配 </template><i class="ASSIGNED" />待见证
    <i class="WITNESSING" />见证中 <i class="WITNESS_UN_REVIEWED" />待审核 <i class="WITNESS_FINISHED" />已完成
  </div>
</template>
<script>
  export default {
    components: {},
    props: {
      type: {
        type: String
      }
    },
    data() {
      return {};
    }
  };
</script>
<style lang="scss" scoped>
  .status-list .top-status {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .top-status {
    display: inline-block;
    clear: both;
    font-size: 14px;
    position: relative;
    line-height: 18px;
    vertical-align: middle;
    & > i {
      // vertical-align: middle;
      display: inline-block;
      width: 12px;
      height: 12px;
      background: #dcdcdc;
      vertical-align: middle;
      margin-top: -2px;
      border-radius: 50%;
      // margin-top: 2px;
      margin-right: 2px;
      margin-left: 5px;
    }
    // "待分配",
    .UNASSIGNED {
      background-color: $UNASSIGNED;
    }
    //"待见证"
    .ASSIGNED {
      background-color: $ASSIGNED;
    }
    //"待审核"
    .WITNESS_UN_REVIEWED {
      background-color: $WITNESS_UN_REVIEWED;
    }
    //"见证中"
    .WITNESSING {
      background-color: $WITNESSING;
    }
    //"已完成"
    .WITNESS_FINISHED {
      background-color: $WITNESS_FINISHED;
    }
    .wait-dot {
      background-color: $wait-dot;
    }
    .assign-dot {
      background-color: $assign-dot;
    }
    .start-dot {
      background-color: $start-dot;
    }
    .end-dot {
      background-color: $end-dot;
    }
    .master-line {
      width: 24px;
      height: 4px;
      vertical-align: middle;
      background: rgba(47, 147, 255, 0.5);
      border-radius: 2px 2px 0px 0px;
    }
    .vice-line {
      width: 24px;
      height: 4px;
      vertical-align: middle;
      background: #fcda84;
      border-radius: 2px 2px 0px 0px;
    }
  }
</style>
